<script setup lang="ts">
import { reactive, ref } from 'vue';

import {
  Breadcrumb,
  BreadcrumbItem,
  Button,
  DatePicker,
  Input,
  Table,
} from 'ant-design-vue';
import dayjs from 'dayjs';
import { RefreshCw, Search } from 'lucide-vue-next';

interface SubLedgerRecord {
  balance: null | number;
  credit: null | number;
  date: string;
  debit: null | number;
  direction: string;
  isSpecial?: boolean;
  key: string;
  summary: string;
  voucherNo: string;
}

interface QueryForm {
  endDate: dayjs.Dayjs | null;
  searchKeyword: string;
  selectedSubject: string;
  startDate: dayjs.Dayjs | null;
}

// 查询表单数据
const queryForm = reactive<QueryForm>({
  endDate: dayjs('2025-01'),
  searchKeyword: '',
  selectedSubject: '1001',
  startDate: dayjs('2025-01'),
});

// 科目选项数据
const subjectOptions = [
  { code: '1001', name: '库存现金' },
  { code: '1002', name: '银行存款' },
  { code: '1004', name: '备用金' },
  { code: '1012', name: '其他货币资金' },
  { code: '101201', name: '其他货币资金-银行汇票' },
  { code: '101202', name: '其他货币资金-银行本票' },
  { code: '101203', name: '其他货币资金-信用卡' },
  { code: '101204', name: '其他货币资金-外埠存款' },
  { code: '101205', name: '其他货币资金-外币' },
  { code: '1101', name: '短期投资' },
  { code: '110101', name: '短期投资-股票' },
];

// 过滤后的科目选项
const filteredSubjects = ref(subjectOptions);

// 表格列配置
const columns = [
  {
    align: 'center' as const,
    dataIndex: 'date',
    key: 'date',
    title: '日期',
    width: 100,
  },
  {
    align: 'center' as const,
    dataIndex: 'voucherNo',
    key: 'voucherNo',
    title: '凭证号',
    width: 100,
  },
  {
    align: 'left' as const,
    dataIndex: 'summary',
    key: 'summary',
    title: '摘要',
    width: 200,
  },
  {
    align: 'right' as const,
    dataIndex: 'debit',
    key: 'debit',
    title: '借方',
    width: 120,
  },
  {
    align: 'right' as const,
    dataIndex: 'credit',
    key: 'credit',
    title: '贷方',
    width: 120,
  },
  {
    align: 'center' as const,
    dataIndex: 'direction',
    key: 'direction',
    title: '方向',
    width: 80,
  },
];

// 明细账数据
const subLedgerData = ref<SubLedgerRecord[]>([
  {
    balance: null,
    credit: null,
    date: '2025-01',
    debit: null,
    direction: '借',
    isSpecial: true,
    key: '1',
    summary: '期初余额',
    voucherNo: '',
  },
  {
    balance: null,
    credit: null,
    date: '2025-01',
    debit: null,
    direction: '借',
    isSpecial: true,
    key: '2',
    summary: '本月合计',
    voucherNo: '',
  },
  {
    balance: null,
    credit: null,
    date: '2025-01',
    debit: null,
    direction: '借',
    isSpecial: true,
    key: '3',
    summary: '本年累计',
    voucherNo: '',
  },
]);

// 格式化金额
const formatAmount = (amount: null | number): string => {
  if (amount === null || amount === 0) return '';
  return amount.toLocaleString('zh-CN', {
    maximumFractionDigits: 2,
    minimumFractionDigits: 2,
  });
};

// 事件处理函数
const handleBackToWorkspace = () => {
  // 返回工作台
};

const handleRefresh = () => {
  // 刷新页面
};

const handleSubjectClick = (subject: { code: string; name: string }) => {
  queryForm.selectedSubject = subject.code;
  // 重新加载明细账数据
};

const handleSearch = () => {
  // 执行科目搜索
  const keyword = queryForm.searchKeyword.toLowerCase();
  filteredSubjects.value = keyword
    ? subjectOptions.filter(
        (subject) =>
          subject.code.toLowerCase().includes(keyword) ||
          subject.name.toLowerCase().includes(keyword),
      )
    : subjectOptions;
};

const handleDateChange = () => {
  // 重新加载数据
};
</script>

<template>
  <div class="h-full p-4">
    <!-- 页面顶部栏 -->
    <div class="mb-4 flex items-center justify-between">
      <!-- 左侧公司名称 -->
      <div class="text-lg font-medium text-gray-800">
        北京神州神源科技有限公司
      </div>

      <!-- 中间面包屑 -->
      <div class="flex-1 px-4">
        <Breadcrumb>
          <BreadcrumbItem>账簿</BreadcrumbItem>
          <BreadcrumbItem>明细账</BreadcrumbItem>
        </Breadcrumb>
      </div>

      <!-- 右侧操作区 -->
      <div class="flex items-center space-x-2">
        <Button type="primary" @click="handleBackToWorkspace">
          返回工作台
        </Button>
        <Button type="text" @click="handleRefresh">
          <RefreshCw class="h-4 w-4" />
        </Button>
      </div>
    </div>

    <!-- 明细账核心功能区 -->
    <div class="flex h-full gap-4">
      <!-- 左侧筛选与科目区 -->
      <div class="w-80 rounded-lg bg-white p-4 shadow-sm">
        <!-- 会计期间 -->
        <div class="mb-4">
          <div class="mb-2 text-sm font-medium text-gray-700">会计期间</div>
          <div class="flex items-center space-x-2">
            <DatePicker
              v-model:value="queryForm.startDate"
              picker="month"
              placeholder="开始月份"
              class="flex-1"
              @change="handleDateChange"
            />
            <DatePicker
              v-model:value="queryForm.endDate"
              picker="month"
              placeholder="结束月份"
              class="flex-1"
              @change="handleDateChange"
            />
          </div>
        </div>

        <!-- 科目搜索 -->
        <div class="mb-4">
          <div class="mb-2 text-sm font-medium text-gray-700">科目搜索</div>
          <div class="flex items-center space-x-2">
            <Input
              v-model:value="queryForm.searchKeyword"
              placeholder="搜索科目编码或名称"
              class="flex-1"
              @press-enter="handleSearch"
            />
            <Button type="primary" @click="handleSearch">
              <Search class="h-4 w-4" />
            </Button>
          </div>
        </div>

        <!-- 科目列表 -->
        <div class="mb-2 text-sm font-medium text-gray-700">科目列表</div>
        <div class="max-h-96 overflow-y-auto">
          <div
            v-for="subject in filteredSubjects"
            :key="subject.code"
            class="cursor-pointer rounded p-2 text-sm transition-colors hover:bg-gray-50"
            :class="[
              queryForm.selectedSubject === subject.code
                ? 'bg-blue-50 text-blue-600'
                : 'text-gray-700',
            ]"
            @click="handleSubjectClick(subject)"
          >
            {{ subject.code }} {{ subject.name }}
          </div>
        </div>
      </div>

      <!-- 右侧明细账表格 -->
      <div class="flex-1 rounded-lg bg-white p-4 shadow-sm">
        <div class="mb-4 flex items-center justify-between">
          <h3 class="text-lg font-medium text-gray-800">
            {{ queryForm.selectedSubject }} 库存现金 - 明细账
          </h3>
        </div>

        <div class="overflow-x-auto">
          <Table
            :columns="columns"
            :data-source="subLedgerData"
            :pagination="false"
            :scroll="{ x: 800 }"
            size="small"
            bordered
            class="sub-ledger-table"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'date'">
                <span :class="{ 'font-medium': record.isSpecial }">
                  {{ record.date }}
                </span>
              </template>
              <template v-else-if="column.key === 'voucherNo'">
                <span :class="{ 'font-medium': record.isSpecial }">
                  {{ record.voucherNo }}
                </span>
              </template>
              <template v-else-if="column.key === 'summary'">
                <span :class="{ 'font-medium': record.isSpecial }">
                  {{ record.summary }}
                </span>
              </template>
              <template v-else-if="column.key === 'debit'">
                <span :class="{ 'font-medium': record.isSpecial }">
                  {{ formatAmount(record.debit) }}
                </span>
              </template>
              <template v-else-if="column.key === 'credit'">
                <span :class="{ 'font-medium': record.isSpecial }">
                  {{ formatAmount(record.credit) }}
                </span>
              </template>
              <template v-else-if="column.key === 'direction'">
                <span :class="{ 'font-medium': record.isSpecial }">
                  {{ record.direction }}
                </span>
              </template>
            </template>
          </Table>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.sub-ledger-table :deep(.ant-table-tbody > tr.ant-table-row) {
  background-color: #fff;
}

.sub-ledger-table :deep(.ant-table-thead > tr > th) {
  background-color: #fafafa;
  font-weight: 500;
  text-align: center;
}

.sub-ledger-table :deep(.ant-table-tbody > tr > td) {
  padding: 8px 12px;
}

.sub-ledger-table :deep(.ant-table-tbody > tr:hover > td) {
  background-color: #f5f5f5;
}
</style>
